export const addNewsList = (editor) => {
  const opts = {
    id: "news-list",
    label: "News List",
    classPrefix: "news-list",
    style: "",
    styleAdditional: "",
  };

  const { Components,BlockManager } = editor;
  const { id, label } = opts;

  const newsListPfx = opts.classPrefix;
  const idContainer = `${id}-container`;
  const idNewsItem = `${id}-news-item`;
  const idNewsLink = `${id}-news-link`;
  const idNewsDate = `${id}-news-date`;

  Components.addType(id, {
    model: {
      defaults: {
        name: label,
        attributes: { class: newsListPfx ,'data-gjs-type':id},
        components: { type: idContainer },
        styles:
          (opts.style ||
            `
          .${newsListPfx} {
            padding: 0;
            margin: 0;
            width: 100%;
            text-align: center;
            display: flex;
          }

          .${newsListPfx}-container {
            display: flex;
            flex-direction: column;
            list-style-type: square;
            width: 96%;
          }

          .${newsListPfx}-item {
            border-bottom: 1px dotted #000;
            // padding: 10px 0;
            padding: 2px;
            margin-bottom: 5px;
            width: 100%;
          }

          .${newsListPfx}-link {
            color: inherit;
            text-decoration: none;
            float: left;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 80%;
          }

          .${newsListPfx}-date {
            white-space: nowrap;
            margin: 0 10px;
            float: right;
          }
        `) + opts.styleAdditional,
      },
    },
  });

  Components.addType(idContainer, {
    model: {
      defaults: {
        attributes: { class: `${newsListPfx}-container`, 'data-gjs': 'news-list','data-gjs-type':idContainer },
        name: 'News List Container',
        // draggable: false,
        // removable: false,
        // copyable: false,
        // highlightable: false,
        tagName:'ul',
        components: [
          { type: idNewsItem, components: [
              { type: idNewsLink, components: '1文章标题(这里输出的是文章标题)' },
              { type: idNewsDate, components: '2024-06-27' },
            ]
          },
          { type: idNewsItem, components: [
              { type: idNewsLink, components: '2文章标题(这里输出的是文章标题)' },
              { type: idNewsDate, components: '2024-06-27' },
            ]
          },
        ],
      },
    },
  });

  Components.addType(idNewsItem, {
    model: {
      defaults: {
        name: 'News Item',
        tagName:'li',
        attributes: { class: `${newsListPfx}-item`,'data-gjs-type':idNewsItem },
      },
    },
  });

  Components.addType(idNewsLink, {
    extend: 'link',
    model: {
      defaults: {
        name: 'News Link',
        draggable: `[data-gjs-type="${idContainer}"]`,
        attributes: { class: `${newsListPfx}-link`,'data-gjs-type':idNewsLink },
      },
    },
  });

  Components.addType(idNewsDate, {
    model: {
      defaults: {
        name: 'News Date',
        attributes: { class: `${newsListPfx}-date`,'data-gjs-type':idNewsDate },
        draggable: false,
        copyable: false,
        highlightable: false,
      },
    },
  });

  BlockManager.add("news-list", {
    media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px"><path d="M3 6h18v2H3zM3 10h18v2H3zM3 14h18v2H3zM3 18h18v2H3z"/></svg>`,
    label: "新闻列表",
    category: "新闻类",
    select: true,
    content: { type: "news-list" },
  });
};
